import React from 'react';
import {
View,
ScrollView,
TouchableOpacity,
Text,
Image,
Linking
} from 'react-native';

import BasePage from '../common/BasePage';
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow';
import Config from '../../config';
import HeartEapListView from "./HeartEapListView";
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import TImage from '../../components/TImage';
import BaseItem from '../common/BaseItem';
import CommonStyles from '../../common/CommonStyles';
import HeartExpertsTodayListAction from '../../actions/heart/HeartExpertsTodayListAction';

export default class HeartEAPMainPage extends BasePage {
  constructor(props) {
    super(props);
    this.height = SizeUtils.getWindowSize().height - Config.paddingTop;
    this._viewPager = null;
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          paddingTop:Config.paddingTop,
          height:SizeUtils.getWindowSize().height}}>
        {this._renderEap()}
        {this._renderNavigationBar()}
      </View>
    )
  }
  _onRenderItem(data, index) {
    return (
      <Item key={index} data={data} rowID={index}/>
    )
  }
  _onPressItem(data) {
    this.gotoPage(data.page)
  }
  _renderShowImage() {
    return (
        <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginTop: SizeUtils.translateDesignHeightToCode(40),}}>
        <TImage source={require("../../../resource/images/heart/eap/zhiyuanzhe.jpg")}
         style={{width:670, height:340}}/>
        </View>
    )
  }
  _onRenderHeader(){
    return (<View >
      {/* {this._renderShowImage()} */}
      {this._renderSmallPager()}
      <View style={{backgroundColor:'#f2f2f2',height:10}}/>
      <View
            style={{
              height: SizeUtils.translateDesignHeightToCode(180),
              backgroundColor: "#f8f8f8",
              flexDirection: "row",
              justifyContent: "space-around",
              alignItems: "center"
            }}
          >
            <TouchableOpacity onPress={()=>{this._onPressCallTel(0)}} style={{ alignItems: "center" }}>
              <Image
                source={require("../../../resource/images/heart/aiqingshi/falu.png")}
                style={{ width: 45, height: 45 }}
                resizeMode={"cover"}
              />
              <Text style={{ color: "#000", fontSize: 12 }}>{"法律咨询"}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{this._onPressCallTel(1)}} style={{ alignItems: "center" }}>
              <Image
                source={require("../../../resource/images/heart/aiqingshi/xinli.png")}
                style={{ width: 45, height: 45 }}
                resizeMode={"cover"}
              />
              <Text style={{ color: "#000", fontSize: 12 }}>{"心理咨询"}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{this._onPressCallTel(2)}} style={{ alignItems: "center" }}>
              <Image
                source={require("../../../resource/images/heart/aiqingshi/vipcard.png")}
                style={{ width: 45, height: 45 }}
                resizeMode={"cover"}
              />
              <Text style={{ color: "#000", fontSize: 12 }}>{"会员卡咨询"}</Text>
            </TouchableOpacity>
            <TouchableOpacity  onPress={()=>{this._onPressCallTel(2)}} style={{ alignItems: "center" }}>
              <Image
                source={require("../../../resource/images/heart/aiqingshi/yuyue.png")}
                style={{ width: 45, height: 45 }}
                resizeMode={"cover"}
              />
              <Text style={{ color: "#000", fontSize: 12 }}>{"预约服务"}</Text>
            </TouchableOpacity>
          </View>
      {this._renderHeader()}
    </View>)
  }
  _onPressCallTel(index){
    const TelArr =['0459-5970101','0459-5970909','0459-5982977','0459-5982677'];
    Linking.openURL('tel:'+TelArr[index])
  }
  _onRenderFooter(){
    const isempert =this._listview?(this._listview.state.data.length===0?true:false):false;
    return(
        <View>
        <View style={{backgroundColor:'#f2f2f2',height:10}}/>
          {isempert?
                      <View style={{
              alignItems: 'center',
              justifyContent: 'center',
              height: SizeUtils.translateDesignHeightToCode(400)
            }}>
              <Text style={{fontSize:17}}>今日无值班专家</Text>
            </View>:null
          }
          {this._renderButtonView()}
          </View>)
  }
  _onPressMore() {
    this.gotoPage(Config.pages.heart_ZJ_List_page);
  }
  _renderButtonView(){
    return(
      <TouchableOpacity style={{
          width:(SizeUtils.getWindowSize.width - SizeUtils.translateDesignWidthToCode(40)),
          backgroundColor:'#ee3535',
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius:4,
          height: SizeUtils.translateDesignHeightToCode(88),
          margin:SizeUtils.translateDesignWidthToCode(30),
        }} onPress={()=>{this.gotoPage(Config.pages.heart_msg_list_page,{type:2});}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30),color:'#fff'}}>{'线上秘密留言'}</Text>
      </TouchableOpacity>
    );
  }
  _renderHeader() {
    let moreStr = "更多内容 >";
    return (
      <View
        style={{
          flexDirection: "row",
          paddingLeft: SizeUtils.translateDesignWidthToCode(30),
          paddingRight: SizeUtils.translateDesignWidthToCode(30),
          paddingBottom: SizeUtils.translateDesignHeightToCode(20),
          justifyContent: "space-between",
          borderBottomWidth: 1,
          borderColor: "#eeeeee",
          paddingTop: SizeUtils.translateDesignHeightToCode(30),
          alignItems: "center"
        }}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TImage
            source={require("../../../resource/images/heart/eap_user.png")}
            style={{ width: 30, height: 30 }}
          />
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: "#333333",
              marginLeft: SizeUtils.translateDesignWidthToCode(8),
              borderWidth: 0,
              backgroundColor: "#00000000",
              fontWeight: "bold"
            }}
          >
            {'值班专家'}
          </Text>
        </View>
        <TouchableOpacity onPress={this._onPressMore.bind(this)}>
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(24),
              color: "#888888"
            }}
          >
            {moreStr}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
  _renderSmallPager() {
    return (
    <View style={{
        }}>
        <CommonViewPagerMultiShow ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.HEART_EAP}/>
      </View>
    )
  }
  _renderEap(){
    return (
      <HeartEapListView ref={(ref) => this._listview = ref}   isThisRequest={true} style={{marginTop: SizeUtils.translateDesignHeightToCode(20),height:this.height}}
            noEmpty = {true} onRenderItem={this._onRenderItem.bind(this)} requestData={this._requestData.bind(this)}
            requestType={1} onRenderHeader={this._onRenderHeader.bind(this)}
            onRenderFooter={this._onRenderFooter.bind(this)}>
          </HeartEapListView>
    )
  }

  _requestData(page, listView) {
    new HeartExpertsTodayListAction().call(listView, {page:1, page_size:2,  sort_id:1 });
    this._viewPager.doRefresh();
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }
  _onHeartPressItem(data) {
    data.type = 2;
    data.recommended = true;
    this.gotoPage(Config.pages.heart_expert_data, data);
  }
  render() {
    return (
        <TouchableOpacity
          style={{flex:1, flexDirection:"row",
              backgroundColor:"#ffffff",
              borderColor:"#eeeeee",
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginTop:SizeUtils.translateDesignHeightToCode(30),
              paddingBottom:SizeUtils.translateDesignHeightToCode(30),
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}
              onPress={() => {this._onHeartPressItem(this.props.data);}}>
            <TImage source={this._getImageSource(this.props.data)}
              style={{width:200,height:230}}/>
            <View style={{flex:1,paddingLeft:SizeUtils.translateDesignWidthToCode(30)}}>
                  <Text
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(48)}]}>
                      {this.props.data.name}
                  </Text>
                  <Text
                    style={[CommonStyles.primaryText, {color:'#888888',paddingTop:SizeUtils.translateDesignHeightToCode(10),fontSize:SizeUtils.translateFontSizeToCode(30)}]}>
                      {this.props.data.title}
                  </Text>
                  <Text
                    numberOfLines={3}
                    style={[CommonStyles.primaryText, {paddingTop:SizeUtils.translateDesignHeightToCode(10),
                        lineHeight:SizeUtils.translateDesignHeightToCode(40),fontSize:SizeUtils.translateFontSizeToCode(28),}]}>
                      {this.props.data.desc1}
                  </Text>
            </View>
        </TouchableOpacity>
    )
  }

  _getImageSource(data) {
    if(data.image_urls && data.image_urls[0]) {
      return {uri: data.image_urls[0]};
    }
    else {
      return {uri: ""};
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity(time)
    return timeStr;
  }
}
